<script setup lang="ts">
import { ref } from 'vue'
import idle from './image/avif/idle.avif'
import hello from './image/avif/hello.avif'
import handup from './image/avif/handup.avif'
import speak from './image/avif/speak120.avif'
import handdown from './image/avif/handdown.avif'
type poses = 'idle' | 'hello' | 'handup' | 'speak' | 'handdown'
const status = ref<poses>('idle')
const toHello = () => {
  status.value = 'hello'
  setTimeout(() => {
    toSpeak()
  }, 2600)
}
const toSpeak = () => {
  status.value = 'handup'
  setTimeout(() => {
    status.value = 'speak'
  }, 1000)
}
const toIdle = () => {
  if (status.value == 'speak') {
    status.value = 'handdown'
    setTimeout(() => {
      toIdle()
    }, 450)
  } else {
    status.value = 'idle'
  }
}
const toBye = () => {
  status.value = 'hello'
  setTimeout(() => {
    status.value = 'idle'
    // setTimeout(() => {
    //   handleRandURL();
    // }, 1000);
  }, 2450)
}
// 对外暴露方法，使其他组件可以调用
defineExpose({
  toSpeak,
  toHello,
  toIdle,
  toBye,
})
</script>
<template>
  <div class="assistant-image">
    <img :src="idle" alt="闲置" v-show="status == 'idle'" />
    <img :src="hello" alt="打招呼" v-show="status == 'hello'" />
    <img :src="handup" alt="举手" v-show="status == 'handup'" />
    <img :src="speak" alt="说话" v-show="status == 'speak'" />
    <img :src="handdown" alt="放手" v-show="status == 'handdown'" />
  </div>
</template>
<style scoped>
/* 数字人图像样式 */
.assistant-image {
  position: fixed;
  top: 15vh;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.assistant-image img {
  max-width: 100%;
  width: auto;
  height: 100%;
  object-fit: cover;
}
</style>
